<#import "/admin/_layout.html" as layout>
<@layout.header "页面编辑"></@layout.header>
<@layout.body>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                        <li class="breadcrumb-item"><a href="#">页面</a></li>
                        <li class="breadcrumb-item active">编辑</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="card card-primary">

                <ul class="nav nav-tabs">
                    <li class="nav-item"><a class="nav-link active" href="#timeline" data-toggle="tab">页面属性</a></li>
                    <li class="nav-item"><a class="nav-link" href="#activity" data-toggle="tab">页面详情</a></li>
                </ul>

                <form id="myForm" method="POST" action="/admin/page/doSave" ok="/admin/page/list">
                    <input type="hidden" name="id" value="${(singlePage.id)!}">
                    <div class="tab-content">
                        <div class="active tab-pane fade show" id="timeline">
                            <div class="col-12" style="padding: 10px 10px 10px 10px;">
                                <div class="form-group">
                                    <label for="title">页面标题</label>
                                    <input type="text" name="title" class="form-control" id="title" value="${(singlePage.title)!}" placeholder="请输入页面标题">
                                </div>
                                <div class="form-group">
                                    <label for="path">页面路径</label>
                                    <input type="text" name="path" class="form-control" id="path" value="${(singlePage.path)!}" placeholder="请输入页面路径">
                                </div>
                                <div class="box box-solid" style="width: 200px;">
                                    <div class="box-header with-border ">
                                        <label for="isAdmin">缩略图</label>
                                    </div>
                                    <div class="box-body no-padding">
                                        <img src="${(singlePage.thumbUrl)!'/static/img/default.jpg'}"
                                             style="width: 100%;height: 200px"
                                             id="thumbnail">
                                        <input type="hidden" value="${(singlePage.thumbnail)!}" name="thumbnail" id="articleThumbnail">
                                    </div>
                                    <div class="box-footer">
                                        <button type="button" class="btn-image-browser btn btn-default btn-sm "
                                                for-src="thumbnail"
                                                for-input="articleThumbnail">选择图片
                                        </button>
                                        <a href="javascript:;" style="padding-left: 15px" id="removeThumbnail">移除</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="loginAccount">页面摘要</label>
                                    <textarea rows="2" name="summary" class="form-control" id="summary" placeholder="请输入页面摘要">${(singlePage.summary)!}</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="loginAccount">SEO关键字</label>
                                    <textarea rows="2" name="seoKeywords" class="form-control" id="seoKeywords" placeholder="请输入SEO关键字">${(singlePage.seoKeywords)!}</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="loginAccount">SEO描述</label>
                                    <textarea rows="2" name="seoDescription" class="form-control" id="seoDescription" placeholder="请输入SEO描述">${(singlePage.seoDescription)!}</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="loginAccount">排序号</label>
                                    <input type="number" name="sortNum" class="form-control" id="sortNum" value="${(singlePage.sortNum)!}" placeholder="请输入页面排序号">
                                </div>
                                <div class="form-group">
                                    <label for="loginAccount">外链</label>
                                    <input type="text" name="outLink" class="form-control" id="outLink" value="${(singlePage.outLink)!}" placeholder="请输入页面外链">
                                </div>
                                <div class="form-group">
                                    <label for="loginAccount">浏览量</label>
                                    <input type="number" name="viewCount" class="form-control" id="viewCount" value="${(singlePage.viewCount)!}" placeholder="请输入页面浏览量">
                                </div>
                                <div class="form-group">
                                    <#assign _isEnableComment=(singlePage.commentEnable)!1 />
                                    <label for="commentEnable">是否允许评论</label>
                                    <input type="checkbox" class="form-control switchery" id="commentEnable" name="commentEnable" value="${_isEnableComment}" <@checkedIf value=(_isEnableComment ==1)/>>
                                </div>
                                <div class="form-group">
                                    <#assign _status=(singlePage.status)!"publish" />
                                    <label for="status">状态</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="publish" <@selectedIf value=(_status =="publish")/>>发布</option>
                                        <option value="draft" <@selectedIf value=(_status =="draft")/>>草稿</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="roleName">页面后缀</label>
                                    <input type="text" name="suffix" class="form-control" id="suffix" placeholder="请输入页面后缀" value="${(singlePage.suffix)!}">
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade show" id="activity">
                            <div class="form-group">
                                <textarea class="form-control" id="editor1" name="contentHtml" style="height: 467px;width: 100%;background-color: white">${(singlePage.contentHtml)!}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</@layout.body>
<@layout.script>
    <script src="/static/libs/ckeditor/ckeditor.js"></script>
    <script>
        $("#removeThumbnail").on("click", function () {
            $("#thumbnail").attr("src", "/static/img/default.jpg");
            $("#articleThumbnail").val("");
        })
        initEditor('editor1', 467, "html");
        $(function () {
            submitForm({
                title: { required: true},
                path: { required: true},
                thumbnail: { required: true},
                summary: { required: true},
                contentHtml: { required: true},
            }, {
                title: {required: "请输入页面标题"},
                path: {required: "请输入页面路径"},
                thumbnail: {required: "请选择页面缩略图"},
                summary: {required: "请输入页面摘要"},
                contentHtml: {required: "请输入页面详情"}
            })
        });
    </script>
</@layout.script>